import myanimate from './utils.js'
// 获取元素
const banner = document.querySelector('.banner');
const imgBox = banner.querySelector('.imgBox');
const pointBox = banner.querySelector('.pointBox');
let index = 1; // 记录当前是第几张图片
let timer; // 声明一个变量 存储定时器
let banner_width = banner.clientWidth;
var flag = true;
// 正常该获取两个箭头  事件委托 委托给banner 减少dom的获取 及循环的绑定 
// 1
// 实现效果 
// 圆环 
// 5123451 

// 复制1 放到 ul 最后面
// 复制最后1 放到 ul 最前面
// 1 手动赋值    2 js复制 
//元素.firstElementChild
//元素.lastElementChild
// appendChild
// insertBefore 需要找到父元素
// cloneNode(true)  克隆节点  true 克隆子节点 
// createElement 创建元素  
// 复制ul的第一个子元素 
copyvalue();

function copyvalue() {
    var first = imgBox.firstElementChild.cloneNode(true);
    var last = imgBox.lastElementChild.cloneNode(true);


    imgBox.appendChild(first);
    imgBox.insertBefore(last, imgBox.firstElementChild);

    imgBox.style.width = imgBox.children.length * 100 + '%';
    imgBox.style.left = -index * banner_width + 'px';
    // 默认让第一张显示
}





//2 

// 动态生成焦点 
// 然后放到 ol 里面

// 创建 节点   <li></li> createElement
setPoint();

function setPoint() {
    // 有多少图片生成多少个焦点
    const pointNum = imgBox.children.length - 2; // 生成5个焦点
    // 挨个生成焦点  
    for (let i = 0; i < pointNum; i++) {
        const li = document.createElement('li');

        li.classList.add('item');
        li.dataset.point = i;
        if (i === 0) li.classList.add('active');
        // 把li 放到 ol中 
        pointBox.appendChild(li);
    }
}
// 3

// 自动轮播  
// 5123451

// => 0  假第一张
// => 1  第一张
// => 2  第二张
// => 3  第三张
// => 4  第四张
// => 5  第五张
// => 6  假最后一张
// 0  left0
// 目前第一张  ul 宽是 600px  第一张 left -600px

// 1秒以后 第二张    left    -1200px
// 1秒以后 第三张    left    -1800px
// 1秒以后 第四张    left    -2400px
// 1秒以后 第五张    left    -3000px
// 下一张往左动 方向 - 
// 第几张 * -600px 
// 张数++ 
autoplay()
function autoplay(){
    timer = setInterval(() => {
        index++;
        myanimate(imgBox,{left:-index*banner_width},moveend);
    },2000)
}
//4 轮播用到我们的运动函数  
// 运动结束 把第几张 拉回到 第一张 
function moveend(){
    if(index >= imgBox.children.length-1){
        index = 1;
        imgBox.style.left = -index*banner_width+'px';
    }

    if(index <= 0){
        index = imgBox.children.length-2;
        imgBox.style.left = -index*banner_width+'px';
    }

    for(let i = 0;i<pointBox.children.length;i++){
        pointBox.children[i].classList.remove('active');
    }
    pointBox.children[index-1].classList.add('active');

    
    flag = true;
}

// 5123451
// 1234512
// 2345123
// 3451234
// 4512345
// 5123451


// 5 鼠标移入 停止定时器  停止播放  
overOut()
function overOut(){
    banner.onmouseover = ()=>{clearInterval(timer)}
    banner.addEventListener('mouseout',()=>autoplay())
}

// 6 鼠标移出 开启定时器 自动播放 


// 7 给左箭头和右箭头绑定点击事件
// 左箭头  上一张  页数 -- 
// 右箭头  下一张  页数 ++
bindEvent()
function bindEvent(){
    banner.addEventListener('click',(e)=>{
        // 判断是左按钮
        if(e.target.className === 'left'){
            if(flag === false) return;
            index--;
            flag = false;
            myanimate(imgBox,{left:-index*banner_width},moveend);
        }
        // 自动播放 用到定时器
        // 切换图片 也用到了定时器 
        // 自动播放 过程中 切换图片 会触发多个定时器同时执行 
        // 也就是比较快
        // 解决方案  开关
    
        // 判断是右按钮
        if(e.target.className === 'right'){
            if(flag === false) return;
            index++;
            flag = false;
            myanimate(imgBox,{left:-index*banner_width},moveend);
        }

        // 判断点击的是否是div  
        if(e.target.className === 'item'){
            if(flag == false){
                return 
            }
            flag = false;
            // index = 
            // myanimate()
        }



    }
    
    
    
    )
}


// 8 点击焦点  跳转到对应的图片


// 问题  

// 离开当前页面 再回来的时候 
// 有个小抖动 
//说明 当前页面离开以后 定时器没有停止 dom已经不动了  

// 解决方案  
// 离开页面的时候 停止轮播 
// 回来的时候 继续轮播  

changePage()
function changePage(){
    // 绑定一个事件
    // 当可视化窗口区域发生变化的时候
    // 会触发的时间  
    document.onvisibilitychange = function(){
        // console.log('页面走了')
        // console.log(document.visibilityState)
        if(document.visibilityState == 'hidden'){
            clearInterval(timer);
        }else if(document.visibilityState == 'visible'){
            autoplay();

        }
    }
}